<template>
	<view>
		<view class="rowSpaceBetween mtb20">
			<!-- 显示格式化后的开始时间 -->
			<view style="display: flex; justify-content: space-around;width: 100%;">
				<view class="startTime" @click="openPicker('start')">
					{{ startTime }}
				</view>
				<view class="cardTitle">至</view>
				<!-- 显示格式化后的结束时间 -->
				<view class="endTime" @click="openPicker('end')">
					{{ endTime }}
				</view>
			</view>
		</view>
		<!-- 时间选择器 -->
		<uv-datetime-picker ref="datetimePicker" mode="date" @confirm="handleConfirm" :max-date="maxDate" />
	</view>
</template>

<script>
	export default {
		props: {
			timeType: {
				type: String,
				default: '0'
			}
		},
		data() {
			// 计算100年后的时间戳
			const currentDate = new Date();
			const maxDate = new Date(currentDate.setFullYear(currentDate.getFullYear() + 100)); // 当前时间 + 100年
			return {
				startTime: this.formatter(new Date()), // 默认开始时间为当前格式化日期
				endTime: this.formatter(new Date()), // 默认结束时间为当前格式化日期
				selectedField: '', // 用来记录当前选择的是开始时间还是结束时间
				maxDate: maxDate.getTime() // 100年后的时间戳
			};
		},
		watch: {
			timeType(newVal) {
				console.log('timeType:', newVal);
				if (newVal == '1') {
					// 设置结束时间为最大日期
					this.endTime = this.formatter(new Date(this.maxDate));
				} else {
					this.endTime = this.formatter(new Date());
				}
			}
		},
		methods: {
			// 打开时间选择器并传入是选择开始时间还是结束时间
			openPicker(type) {
				this.selectedField = type; // 记录当前是选择开始时间还是结束时间
				if (this.selectedField === 'end' && this.timeType == '1') return
				this.$refs.datetimePicker.open();
			},
			// 选择时间后的回调
			handleConfirm(e) {
				const selectedDate = this.formatter(new Date(e.value));
				if (this.selectedField === 'start') {
					if (new Date(selectedDate) > new Date(this.endTime)) {
						uni.showToast({
							title: '开始时间不能大于结束时间',
							icon: 'none'
						});
						return;
					}
					this.startTime = selectedDate;
				} else if (this.selectedField === 'end') {
					if (new Date(selectedDate) < new Date(this.startTime)) {
						uni.showToast({
							title: '结束时间不能小于开始时间',
							icon: 'none'
						});
						return;
					}
					this.endTime = selectedDate;
				}
			},

			// 格式化时间戳为 'yyyy-MM-dd' 格式
			formatter(date) {
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 保证月是两位数
				const day = date.getDate().toString().padStart(2, '0'); // 保证日是两位数
				return `${year}-${month}-${day}`;
			}
		}
	};
</script>

<style scoped>
	.startTime,
	.endTime {
		font-size: 24rpx;
		cursor: pointer;
	}

	.cardTitle {
		font-size: 24rpx;
	}
</style>